<template>
  <div>
    <el-tag
      :key="tag.data_id"
      v-for="tag in Data"
      closable
      :disable-transitions="false"
      @close="handleClose(tag)"
      :effect="Color(tag)"
      @click="choeseTag(tag)"
    >
      {{ tag.name }}
    </el-tag>
    <div>
      <el-input
        class="input-new-tag"
        v-if="AddVisible"
        v-model="AddValue"
        ref="saveTagAdd"
        size="small"
        @keyup.enter.native="handleAddConfirm('')"
        @blur="handleAddConfirm('')"
      ></el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showAdd">新建一级分类</el-button>

      <el-input
        class="input-new-tag"
        v-if="UpdVisible"
        v-model="UpdValue"
        ref="saveTagUpd"
        size="small"
        @keyup.enter.native="handleUpdConfirm"
        @blur="handleUpdConfirm"
      ></el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showUpd">编辑一级分类</el-button>
    </div>
  </div>
</template>

<script>
  import videoTypeManage from '@/api/videoType';
  export default {
    name: 'artType-view',
    data() {
      return {
        Data: [],
        AddVisible: false,
        AddValue: '',
        UpdVisible: false,
        UpdValue: '',
        Id: '',
      };
    },
    async mounted() {
      await this.getTag();
      this.choeseTag(this.Data[0]);
    },
    computed: {},
    methods: {
      Color(tag) {
        return this.Id === tag.data_id ? 'dark' : 'plain';
      },
      choeseTag(tag) {
        this.Id = tag.data_id;
        this.getTag();
      },
      async getTag() {
        let res = await videoTypeManage.getVideoType();
        this.Data = res.item_list;
      },
      async handleClose(tag) {
        this.$alert('是否确定删除分类：' + tag.name, '删除', {
          confirmButtonText: '确定',
          callback: async (action) => {
            if (action === 'confirm') {
              if (tag.data_id === this.Id) {
                this.Id = '';
              }
              await videoTypeManage.delVideoType(tag.data_id);
              this.getTag();
            }
          },
        });
      },
      showAdd() {
        this.AddVisible = true;
        this.$nextTick(() => {
          this.$refs.saveTagAdd.$refs.input.focus();
        });
      },
      showTwoAdd() {
        if (!this.Id) {
          return;
        }
        this.$nextTick(() => {
          this.$refs.saveTwoTagAdd.$refs.input.focus();
        });
      },

      showUpd() {
        if (!this.Id) {
          return;
        }
        this.UpdVisible = true;
        this.$nextTick(() => {
          this.$refs.saveTagUpd.$refs.input.focus();
        });
      },

      async handleAddConfirm() {
        let value = '';
        value = this.AddValue;
        if (value) {
          await videoTypeManage.setVideoType({ name: value });
          this.getTag();
        }
        this.AddVisible = false;
        this.AddValue = '';
      },

      async handleUpdConfirm() {
        let value = '';
        value = this.UpdValue;
        if (value) {
          await videoTypeManage.updVideoType(this.Id, {
            name: value,
          });
          this.getTag();
        }
        this.UpdVisible = false;
        this.UpdValue = '';
      },
    },
  };
</script>

<style lang="less" scoped>
  .el-tag {
    margin: 10px;
    cursor: pointer;
  }
  .button-new-tag {
    margin: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    margin: 10px;
    width: 90px;
    vertical-align: bottom;
  }
</style>
